<template>
  <div>
    <el-dialog title="添加商品信息" :visible.sync="dialogFormVisible" :show-close="false" width="55%" :center="true">
      <el-form :model="form" ref="form" label-position="left" :label-width="formLabelWidth">
        <el-form-item label="质检情况" prop="quality" :rules="[{ required: true, message: '请选择质检情况', trigger: 'change' }]">
          <el-radio-group v-model="form.quality">
            <el-radio label="0">优质</el-radio>
            <el-radio label="1">合格</el-radio>
            <el-radio label="2">不合格</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="收货单位(本单位)" prop="traceName" :rules="[{ required: true, message: '请输入收货单位' }]">
          <el-input v-model="form.traceName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="location" :rules="[{ required: true, message: '请输入单位地址' }]">
          <el-input v-model="form.location" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="$emit('popup', false)">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
      <el-divider></el-divider>

      <!-- 商品详情信息 -->
      <TraceDetail :good-detail="good" :user="user" :block_pro="block_pro" :block_dis="block_dis" :block_ret="block" />
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import TraceDetail from './TraceDetail.vue';

export default {
  components: {
    TraceDetail
  },
  data() {
    return {
      form: {
        traceName: '', // 收货单位
        quality: '', // 质检情况
        location: '',// 地址
      },
      formLabelWidth: '180px', // 弹窗宽度
      scanData: '',
      testData: { '1000001': { 'traceName': '零售商单位1', 'quality': '1', 'location': '销售地点1' }, '1000002': { 'traceName': '零售商单位2', 'quality': '2', 'location': '销售地点2' }, '1000003': { 'traceName': '零售商单位3', 'quality': '0', 'location': '销售地点3' }, '1000004': { 'traceName': '零售商单位4', 'quality': '1', 'location': '销售地点4' }, '1000005': { 'traceName': '零售商单位5', 'quality': '2', 'location': '销售地点5' }, '1000006': { 'traceName': '零售商单位6', 'quality': '0', 'location': '销售地点6' }, '1000007': { 'traceName': '零售商单位7', 'quality': '1', 'location': '销售地点7' }, '1000008': { 'traceName': '零售商单位8', 'quality': '2', 'location': '销售地点8' }, '1000009': { 'traceName': '零售商单位9', 'quality': '0', 'location': '销售地点9' }, '1000010': { 'traceName': '零售商单位10', 'quality': '1', 'location': '销售地点10' }, '1000011': { 'traceName': '零售商单位11', 'quality': '2', 'location': '销售地点11' }, '1000012': { 'traceName': '零售商单位12', 'quality': '0', 'location': '销售地点12' }, '1000013': { 'traceName': '零售商单位13', 'quality': '1', 'location': '销售地点13' }, '1000014': { 'traceName': '零售商单位14', 'quality': '2', 'location': '销售地点14' }, '1000015': { 'traceName': '零售商单位15', 'quality': '0', 'location': '销售地点15' }, '1000016': { 'traceName': '零售商单位16', 'quality': '1', 'location': '销售地点16' }, '1000017': { 'traceName': '零售商单位17', 'quality': '2', 'location': '销售地点17' }, '1000018': { 'traceName': '零售商单位18', 'quality': '0', 'location': '销售地点18' }, '1000019': { 'traceName': '零售商单位19', 'quality': '1', 'location': '销售地点19' }, '1000020': { 'traceName': '零售商单位20', 'quality': '2', 'location': '销售地点20' } }
    };
  },
  props: ['dialogFormVisible', 'good', 'user', 'block_pro', 'block_dis', "block_ret"],
  mounted() {
    document.addEventListener('keydown', this.handleScannerInput, false);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleScannerInput, false);
  },
  methods: {
    handleScannerInput(event) {
      if (event.key !== 'Enter') {
        this.scanData += event.key;
      } else {
        this.fillFormData(this.scanData);
        this.scanData = ''; // 重置扫描数据，准备下一次扫描
      }
    },
    fillFormData(traceNumber) {
      const data = this.testData[traceNumber];
      if (data) {
        this.form.traceName = data.traceName;
        this.form.quality = parseInt(data.quality);
        this.form.location = data.location;
        this.form.traceNumber = parseInt(traceNumber);
        this.form.retailerAddress = localStorage.getItem('account');

        // 在这里直接提交表单数据，而不是使用 this.$refs.form.validate
        axios({
          method: 'post',
          url: `/addRetail`,
          data: this.form
        }).then(response => {
          // 处理响应
          if (response.data.ret !== 1) {
            this.$message.error('提交失败,已经添加过了');
          } else {
            this.$blockInfo.setBlockInfo("Ret" + this.form.traceNumber, response.data.data)
            console.log(this.$blockInfo.getBlockInfo("Ret" + this.form.traceNumber))
            this.$message.success('提交成功');
            // 可能需要重置表单或执行其他操作
          }
        }).catch(error => {
          console.error('提交失败', error);
          this.$message.error('提交失败');
        });
      } else {
        console.error('没有找到对应的溯源码数据:', traceNumber);
        alert('扫描的溯源码无效，请重新扫描！');
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form)
          // 表单验证成功，这里可以进行后续的提交操作，例如调用API等
          this.$emit('confirmPopup', this.form);
          alert('表单提交成功！');
        } else {
          // 表单验证失败
          alert('表单数据有误，请检查！');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped></style>